<template>
	<view>
		<!-- 上面的店铺介绍开始 -->
		<view  class="upbuimg">
			<!-- 返回键开始 -->
         <view class="cu-bar" style="position: fixed;top: 0upx;"> 
		  <view @tap="backpage" class="action cuIcon-back text-white"></view>
		  </view>
		    <!-- 返回键结束 -->
		</view>
	<!-- 饭堂卡片开始 -->

 <view class="shop-content bg-white flex justify-between">
			<view>
			<view style="font-size: 120%; font-weight: bold;">泽园</view>
			<view>配送约43分钟</view>
			</view>
			<view>
				<image src="../../static/fantang/zeyuan.jpg"></image>
			</view>
		</view>
	
	<!-- 饭堂卡片结束 -->
		<!-- 上面的店铺介绍结束 -->
		<view style="margin-top: 90upx;"></view>
	<view class="flex">
		<!-- 类目展示开始 -->
		<!-- 			<scroll-view scroll-y style="height: calc(100vh - 100upx); width:200upx">
			<view @tap="select(i)" :style="{fontSize:selected==i?'120%':'100%'}" :class="selected==i?'text-bold':''" class="type-item"
			 v-for="(p,i) in types" :key="i">
				<view v-if="selected==i" class="shuxian"></view>{{p}}
			</view>
		</scroll-view> -->
		<scroll-view scroll-y style="height: calc(100vh - 100upx); width:200upx">
			<view @tap="select(i)" :style="{fontSize:selected==i?'120%':'100%'}" :class="selected==i?'text-bold':''" class="type-item"
			 v-for="(p,i) in types" :key="i">
				<view v-if="selected==i" class="shuxian"></view>{{p}}
			</view>
		</scroll-view>
		<!-- 类目展示结束 -->
		<!-- 菜品展示开始 -->
		<scroll-view scroll-with-animation :scroll-into-view="'good-'+selected" class="bg-white" scroll-y style="height: calc(100vh - 100upx); width:550upx">
			<!-- <view class="cart-content"> -->
			<view :id="'good-'+i" v-for="(p,i) in goods" :key="i" class="cart-content bg-white">
				<!-- 					<view>
					<image :src="p.img"></image>
				</view>
				<view class="cart-ycontent" style="width: 300upx;">
					<view class="cart-title">{{p.title}}</view>
					<view class="text-gray">类型：{{p.type}}</view>
					<view class="flex justify-between">
						<view class="text-red text-bold text-lg">{{p.price}}</view>
						<uni-number-box @change="changejieshu" v-model="p.num" style="margin-left: 80upx" :min="0" :max="9"></uni-number-box>
					</view>
				</view> -->
	
	
				<!-- <view class="flex  flex-wrap"> -->
				<view class="justify-center cart-item" style="width: 275upx;" v-for="(tp,ti) in p" :key="ti">
					<!-- <image style="width: 180upx; height: 180upx;" :src="tp.url"></image>
					<view style="text-align: center;">{{tp.title}}</view>
					<view style="font-size: 120%; color: red ; font-weight: bold; text-align: center;">￥{{tp.price}}</view> -->
					<view>
						<image :src="tp.url"></image>
					</view>
					<view class="cart-ycontent" style="width: 300upx;">
						<view class="cart-title">{{tp.title}}</view>
						<view class="text-gray">类型：{{tp.type}}</view>
						<view class="flex justify-between">
							<view class="text-red text-bold text-lg">{{tp.price}}</view>
							<uni-number-box @change="changejieshu" v-model="tp.num" style="margin-left: 80upx" :min="0" :max="9"></uni-number-box>
						</view>
					</view>
	
				</view>
				<!-- </view> -->
	
	
			</view>
	
		</scroll-view>
		<!-- 菜品展示结束 -->
	</view>
	<!-- 中部内容区结束 -->
	<!-- 底部结算栏开始 -->
	<view class="heji flex justify-between">
		<view style="font-size: 120%;">合计<text class="text-orange">{{sum}}</text></view>
		<view>
			<view @tap="zhifupage" class="cu-btn bg-gradual-red round">去结算</view>
		</view>
	</view>
	<!-- 底部结算栏结束 -->
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	export default{
		data(){
			return{
				types:[],
				goods:[],
				selected:0,

			}
		},
		components: {
			uniNumberBox
		},
		onLoad() {
			this.gettypes();
			this.getgoods();
		},
computed: {
			
			sum(){
              var he=0;
			  this.goods.forEach(p=>{
				  p.forEach(tp=>{
					  he+=tp.price*tp.num;
				  });
			  });
			  return he;
			}
		},
		methods:{
        backpage(){
			uni.reLaunch({
				url:"../index/index"
			})
		},
		zhifupage(){
			uni.reLaunch({
				url:"../pay/payze"
			})
		},
		gettypes(){
						var data=[];
		/* 				for(var i=0; i<5 ; i++){
							data.push("类目"+i);
						}; */
						data.push("肉菜");
						data.push("蔬菜");
						data.push("米饭");
						data.push("面食");
						data.push("汤");
						this.types=data;
					},
				getgoods() {
					var data = []
					// 肉菜
					var data1 = [{
							id: 1,
							url:"../../static/roucai/huangmengji.jpg",
							title: "黄焖鸡",
							type: "肉菜",
							price: 6,
							num: 0
						},
						{
							id: 2,
							url: "../../static/roucai/jiangyoujitui.jpg",
							title: "酱油鸡腿",
							type: "肉菜",
							price: 6,
							num: 0
						},
						{
							id: 3,
							url: "../../static/roucai/shaoya.jpg",
							title: "烤鸭",
							type: "肉菜",
							price: 6,
							num: 0
						},
				
						{
							id: 4,
							url: "../../static/roucai/yuxiang.jpg",
							title: "鱼香肉丝",
							type: "肉菜",
							price: 6,
							num: 0
						}
					]
					data.push(data1)
					// 蔬菜
					var data2 = [{
							id: 1,
							url: "../../static/shucai/bailuobo.jpg",
							title: "白萝卜",
							type: "蔬菜",
							price: 2,
							num: 0
						},
						{
							id: 2,
							url: "../../static/shucai/nangua.jpg",
							title: "南瓜",
							type: "蔬菜",
							price: 2,
							num: 0
						},
						{
							id: 3,
							url: "../../static/shucai/qingcai.jpg",
							title: "青菜",
							type: "蔬菜",
							price: 2,
							num: 0
						},
				
						{
							id: 4,
							url: "../../static/shucai/wawacai.jpg",
							title: "娃娃菜",
							type: "蔬菜",
							price: 2,
							num: 0
						}
					]
					data.push(data2)
					// 米饭
					var data3 = [{
							id: 1,
							url: "../../static/mifan/mifan.jpg",
							title: "米饭",
							type: "米饭",
							price: 1,
							num: 0
						}
					]
					data.push(data3)
					// 面食
					var data4 = [{
							id: 1,
							url: "../../static/miantiao/jidanmian.jpg",
							title: "鸡蛋面",
							type: "面食",
							price: 6,
							num: 0
						},
						{
							id: 2,
							url: "../../static/miantiao/luosifen.jpg",
							title: "螺丝粉",
							type: "面食",
							price: 10,
							num: 0
						},
						{
								id: 3,
								url: "../../static/miantiao/niuroumian.jpg",
								title: "牛肉面",
								type: "面食",
								price: 8,
								num: 0
							},
							{
								id: 4,
								url: "../../static/miantiao/yuntunmian.jpg",
								title: "云吞面",
								type: "6",
								price: 12,
								num: 0
							}
					]
					data.push(data4)
					// 汤
					var data5 = [{
							id: 1,
							url: "../../static/tang/jitang.jpg",
							title: "鸡汤",
							type: "汤",
							price: 5,
							num: 0
						},
						{
							id: 2,
							url: "../../static/tang/laoyatang.jpg",
							title: "老鸭汤",
							type: "汤",
							price: 5,
							num: 0
						},
						{
							id: 3,
							url: "../../static/tang/yumizhugu.jpg",
							title: "玉米猪骨汤",
							type: "汤",
							price: 5,
							num: 0
						},
				
						{
							id: 4,
							url: "../../static/tang/zicaidanhua.jpg",
							title: "紫菜蛋花汤",
							type: "汤",
							price: 2,
							num: 0
						}
					]
					data.push(data5)
				
					this.goods = data;
				},
					select(i){
						this.selected=i;
					}
		
			
		}
		
	}
</script>

<style>
	.logo{

	}
	.upbuimg{
		background: url(../../static/lunbo/lamian.jpg);
		width: 750upx; 
		height: 200upx;
		margin-top: 0upx;
		
	}
	.shop-content{
		margin: -80upx 50upx;
		 width: 650upx;
		 height: 250upx;
		 padding: 10upx;
		 border-bottom: solid 0.5upx;
	}
	.shop-content image{
		height: 200upx;
		width: 200upx;
		padding: 20upx;
	}
	.swiperimg {
		height: 330upx;
		width: 750upx;
	}
	.type-item{
		height: 50upx;
		text-align: center;
		line-height: 100upx;
		position: relative;
	}
	.shuxian{
		position: absolute;
		width: 12upx;
		height: 40upx;
		top: 30upx;
		left: 10upx;
		background-color: red;
	}
	.type-item {
		height: 50upx;
		text-align: center;
		line-height: 100upx;
		position: relative;
	}
	
	.shuxian {
		position: absolute;
		width: 12upx;
		height: 40upx;
		top: 30upx;
		left: 10upx;
		background-color: red;
	}
	
	.heji {
		position: fixed;
		bottom: 1upx;
		width: 750upx;
		height: 100upx;
		background-color: white;
		padding-left: 30upx;
		padding-right: 30upx;
	}
	
	.cart-content {
		margin-top: 0upx;
		margin-bottom: 100upx;
	
	}
	
	.cart-item {
		display: flex;
		justify-content: space-between;
		padding: 20upx;
		margin-top: 10upx;
	}
	
	.cart-item image {
		width: 200upx;
		height: 200upx;
	}
	
	.cart-title {
		font-size: 120%;
		font-weight: bold;
		width: 400upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.cart-ycontent {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 5upx;
		padding-bottom: 5upx;
	
	}
</style>
